<template>
  <section class="project-box">
    <el-row class="search-box">
      <el-col :span="24">
        <label for="" class="choose">
          <span>创建时间：</span>
          <el-date-picker
            v-model="dateTime"
            type="daterange"
            size="small"
            placeholder="选择日期范围">
          </el-date-picker>
        </label>
        <label for="" class="choose">
          <span>项目名称：</span> <el-input v-model="paymentName" class="select-box" size="small"></el-input>
        </label>
        <label for="" class="choose">
          <el-button icon="search" type="primary" size="small" @click="getData(1)">搜索</el-button>
        </label>
      </el-col>
    </el-row>
    <el-tabs v-model="activeName" @tab-click="tabClick">
      <el-tab-pane :label="'全部(' + payment.all + ')'" name="1"></el-tab-pane>
      <el-tab-pane :label="'未开始(' + payment.unStart + ')'" name="2"></el-tab-pane>
      <el-tab-pane :label="'进行中(' + payment.ing + ')'" name="3"></el-tab-pane>
      <el-tab-pane :label="'已暂停(' + payment.paused + ')'" name="4"></el-tab-pane>
      <el-tab-pane :label="'已结束(' + payment.end + ')'" name="5"></el-tab-pane>
    </el-tabs>
    <div class="buttonName">
      <el-button icon="self-daochu" class="blue" size="small" @click="handleClick(5)">导出</el-button>
      <el-button icon="document" class="blue" size="small" @click="handleClick(6)">新增缴费项目</el-button>
    </div>
    <el-table :data="list" stripe style="width: 100%">
      <el-table-column prop="name" label="项目名称"> </el-table-column>
      <el-table-column prop="classCount" label="班级个数"> </el-table-column>
      <el-table-column prop="studentCount" label="缴费人数"> </el-table-column>
      <el-table-column prop="amountText" label="应缴费总额"> </el-table-column>
      <el-table-column prop="paymentTime" label="缴费时间"> </el-table-column>  
      <el-table-column label="状态">
        <template slot-scope="scope">
          <span @click.stop="switchClick(1, scope.row.id, scope)" v-if="scope.row.status == 3">
            <el-switch  :width="75" style="text-align:center;" v-model="scope.row.isOpen" on-text="进行中" off-text="已暂停"  :disabled="scope.row.isDisabled"></el-switch>
          </span>
          <span @click.stop="switchClick(0, scope.row.id, scope)" v-if="scope.row.status == 4">
            <el-switch :width="75" style="text-align:center;" v-model="scope.row.isOpen" on-text="进行中" off-text="已暂停" :disabled="scope.row.isDisabled"></el-switch>
          </span>
          <el-switch :width="75" on-text="开启" off-text="已结束" v-if="scope.row.status == 5" disabled></el-switch>
          <el-switch :width="75" on-text="开启" off-text="未开始" v-if="scope.row.status == 2" disabled></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="handleClick(1, scope)" type="text" size="small">详情</el-button>
          <el-button @click="handleClick(2, scope)" type="text" size="small">编辑</el-button>
          <el-button @click="handleClick(3, scope)" type="text" size="small">查看进度</el-button>
          <el-button @click="handleClick(4, scope)" type="text" size="small" v-if="isEqui(scope.row.highest,scope.row.lowest,scope.row.amount)">减免</el-button>
        </template>
      </el-table-column>
    </el-table>
    <paginate :callback="getData" :page="page"></paginate>
  </section>
</template>
<script>
import { projectLIst, getPayment, paymentPause } from 'api/school/project/index'
import common from 'src/util/common'
import { getDayInitTime } from 'src/filter/index'
export default {
  data () {
    let startDate = new Date().getTime() - 365 * 24 * 3600 * 1000
    let endDate = new Date().getTime()
    return {
      activeName: '1', // tab栏的名字
      payment: { // tab信息
        all: '',
        unStart: '',
        ing: '',
        paused: '',
        end: ''
      }, // 项目统计
      intVal: 1, // 请求的页数
      list: [], // 返回的数据列表
      page: {},
      flag: true, // 防止用户多次点击缴费开关
      paymentName: '', // 缴费计划名字
      dateTime: [new Date(startDate), new Date(endDate)], // 时间插件
      startTime: 0, // 开始时间
      endTime: 0 // 结束时间
    }
  },
  created () {
    this.getData(1)
  },
  methods: {
    getData (val) {
      this.intVal = val
      this.startTime = getDayInitTime(this.dateTime[0], 1) / 1000
      this.endTime = getDayInitTime(this.dateTime[1], 2) / 1000
      projectLIst({
        page: val,
        status: parseInt(this.activeName),
        createdStart: this.startTime,
        createdEnd: this.endTime,
        name: this.paymentName,
        count: 15
      }).then(res => {
        res.data.forEach((obj) => {
          obj.studentText = obj.studentCount + '/' + obj.classCount + '个班'
          obj.amountText = '¥' + (obj.shouldPay / 100).toFixed(2)
          obj.paymentTime = common.timeFormat(obj.startTime, 'yyyy.MM.dd') + ' - ' + common.timeFormat(obj.endTime, 'yyyy.MM.dd')
          if (obj.status === 2 || obj.status === 3) {
            obj.isOpen = true
          } else {
            obj.isOpen = false
          }
          obj.isDisabled = false
        })
        this.list = res.data
        this.page = res.page
      })
      getPayment({
        status: parseInt(this.activeName),
        createdStart: this.startTime,
        createdEnd: this.endTime,
        name: this.paymentName
      }).then(v => {
        this.payment = v.data
      })
    },
    handleClick (val, obj) {
      switch (parseInt(val)) {
        case 1:
          this.$router.push({name: 'modifyProject', query: {id: obj.row.id}})
          break
        case 2:
          this.$router.push({name: 'detailsProject', query: {id: obj.row.id}})
          break
        case 3:
          this.$router.push({name: 'payProgress', query: {paymentId: obj.row.id, payName: obj.row.name}})
          break
        case 4:
          this.$router.push({name: 'derate', query: {id: obj.row.id}})
          break
        case 5:
          let loginKey = window.localStorage.loginKey
          window.open(`/net/schooladmin/school-payment-sku/export?status=${Number(this.activeName)}&login-key=${loginKey}`)
          break
        case 6:
          this.$router.push({name: 'addProject'})
          break
      }
    },
    tabClick () {
      this.getData(1)
    },
    switchClick (index, id, scope) { // 开启缴费 index 0: 开启缴费 1: 暂停
      scope.row.isDisabled = true
      if (this.list.length) {
        paymentPause({id, isPause: index}).then(v => {
          this.$message({
            type: 'success',
            message: index ? '已暂停!' : '已开启!'
          })
          this.getData(1)
        })
      }
    },
    isEqui (val1, val2, val3) { // 判断是否相等
      return (val1 === val2) && (val2 === val3) && (val1 === val3)
    }
  }
}
</script>
<style lang="less">
.project-box{
  padding: 20px; 
  .el-tabs__item {
    font-size: 14px;
  }
}
.project-box .buttonName{padding: 0 0 10px 0; display: flex; justify-content: flex-end;}
.project-box .width-80{width: 80px;}
.project-box .float-r{float: right;}
.project-box .float-l{float: left;}
.color-r {color: red;}
.search-box {
  margin-bottom: 20px;
}
.choose {
  margin-right: 10px;
  .select-box {
    width: 200px;
  }
}
</style>
